<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avater_box">
                <img src="~assets/img/头像.jpg" alt="">
            </div> 
            <!-- 登录表单区域 -->
            <el-form :model='loginFrom' 
                    :rules='loginFromRules' 
                    label-width="80px" 
                    class="login_form"
                    ref="loginFormRef">
                <el-form-item prop='username' label='用户名'>
                    <el-input v-model="loginFrom.username" prefix-icon="iconfont icon-user"></el-input>
                </el-form-item>
                <el-form-item prop='password' label='密码'>
                    <el-input v-model="loginFrom.password" prefix-icon="iconfont icon-3702mima" type='password'></el-input>
                </el-form-item >
                <el-form-item class="btns">
                    <el-button type="primary" @click="login" >登录</el-button>
                    <el-button type="info" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { getLogin } from 'network/query'
import request from 'network/query'
export default {
   name:'Login',
   data(){
       return {
           loginFrom:{
               username:'admin',
               password:'123456'
           },
           loginFromRules:{
               username:[
                    { required: true, message: '请输入登录名称', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
               ],
               password:[
                    { required: true, message: '请输入登陆密码', trigger: 'blur' },
                    { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
               ]
           },
       }
   },
   created(){
   },
   methods:{
       reset(){
           this.$refs.loginFormRef.resetFields()
       },
       login(){
           this.$refs.loginFormRef.validate(valid=>{
               if(!valid) return ;
            //    getLogin(this.loginFrom).then(res=>{
            //        console.log(res);
            //        if(res.meta.status != 200){
            //            this.$message.error('登录失败！')
            //        }else{
            //            this.$message.success('登录成功！')
            //            window.sessionStorage.setItem('token',res.data.token)
            //            this.$router.push('/home')
            //        }
            //    })

                // const {data:res} = await this.$http.post('login',{
                //     username:this.loginFrom.username,
                //     password:this.loginFrom.password
                // })
                // console.log(res);
                // if(res.meta.status !== 200){
                //     return this.$message.error('登录失败！')
                // }else{
                //     this.$message.success('登录成功！')
                //     window.sessionStorage.setItem('token',res.data.token)
                //     this.$router.push('/home')
                // }
                request('login','',this.loginFrom,'post').then(res=>{
                    console.log(res);
                    if(res.meta.status != 200){
                       this.$message.error('登录失败！')
                    }else{
                        this.$message.success('登录成功！')
                        window.sessionStorage.setItem('token',res.data.token)
                        this.$router.push('/home')
                    }
                })
           })
       }
   }
  
};
</script>

<style scoped>
    .login_container{
        height: 100%;
        background-color: #2b4b6b;
    }
    .login_box{
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        right: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .avater_box{
        height: 130px;
        width: 130px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        padding: 8px;
        box-shadow: 0 0 10px #eee;
    }
    .avater_box img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .login_form{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }
    .btns{
        float: right;
    }
</style>
